<template>
  <div class="lt_drawer">
    <Transition name="mask_fade">
      <div
        v-if="modelValue"
        class="drawer_mask"
        :style="drawerMaskCpd"
        @click="hideDrawerHandler"
      ></div>
    </Transition>
    <Transition :name="'drawer_' + direction">
      <div
        v-if="modelValue"
        class="drawer_content"
        :style="[drawerSizePositionCpd, drawerBgcCpd, drawerContentRadiusCpd]"
      >
        <div class="header">
          <downRowIcon @click="hideDrawerHandler"></downRowIcon>
        </div>
        <slot></slot>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { LtDrawerEmits, LtDrawerProps } from './type'

import downRowIcon from '../lt-icon/down-row-icon.vue'

const props = withDefaults(defineProps<LtDrawerProps>(), {
  size: '70vh',
  isMask: true,
  direction: 'btt',
  bgc: '#fff',
  isRadius: true,
  radiusSize: '30px',
  isHeader: true
})

const emit = defineEmits<LtDrawerEmits>()

// 计算抽屉位置和大小
const drawerSizePositionCpd = computed(() => {
  let p = ''
  if (props.direction === 'btt') {
    p = `bottom:0px;left: 0px;right: 0px;height: ${props.size};`
  } else if (props.direction === 'ttb') {
    p = `top:0px;left: 0px;right: 0px;height: ${props.size};`
  } else if (props.direction === 'ltr') {
    p = `top:0px;left: 0px;bottom: 0px; width: ${props.size};`
  } else if (props.direction === 'rtl') {
    p = `top:0px;right: 0px;bottom: 0px; width: ${props.size};`
  }
  return p
})

// 计算内容的圆角
const drawerContentRadiusCpd = computed(() => {
  if (!props.isRadius) {
    return ''
  } else {
    let r = ''
    if (props.direction === 'btt') {
      r = `border-radius: ${props.radiusSize} ${props.radiusSize} 0px 0px; `
    } else if (props.direction === 'ttb') {
      r = `border-radius: 0px 0px${props.radiusSize}${props.radiusSize};`
    } else if (props.direction === 'ltr') {
      r = `border-radius: 0px ${props.radiusSize} ${props.radiusSize} 0px;`
    } else if (props.direction === 'rtl') {
      r = `border-radius: ${props.radiusSize} 0px 0px ${props.radiusSize};`
    }
    return r
  }
})

// 计算内容背景颜色
const drawerBgcCpd = computed(() => {
  return `background-color: ${props.bgc};`
})

// 是否显示遮罩层的颜色
const drawerMaskCpd = computed(() => {
  if (!props.isMask) {
    return ''
  } else {
    return 'background-color: rgba(0, 0, 0, 0.5);'
  }
})

const hideDrawerHandler = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped lang="scss">
.lt_drawer {
  .drawer_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  .drawer_content {
    position: fixed;
    z-index: 9999;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;

    .header {
      height: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
    }
  }
}

/* 遮罩层的动画 */
.mask_fade-enter,
.mask_fade-leave-to {
  opacity: 0;
}
.mask_fade-enter-active,
.mask_fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.mask_fade-enter-to,
.mask_fade-leave {
  opacity: 1;
}

/* 内容的动画分为4个方向 */
/* 类容的动画 */
.drawer_btt-enter-from,
.drawer_btt-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.drawer_btt-enter-to,
.drawer_btt-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.drawer_btt-enter-active,
.drawer_btt-leave-active {
  transition: all 0.3s ease-in-out;
}

.drawer_ttb-enter-from,
.drawer_ttb-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}
.drawer_ttb-enter-to,
.drawer_ttb-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.drawer_ttb-enter-active,
.drawer_ttb-leave-active {
  transition: all 0.3s ease-in-out;
}

.drawer_ltr-enter-from,
.drawer_ltr-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.drawer_ltr-enter-to,
.drawer_ltr-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.drawer_ltr-enter-active,
.drawer_ltr-leave-active {
  transition: all 0.3s ease-in-out;
}

.drawer_rtl-enter-from,
.drawer_rtl-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.drawer_rtl-enter-to,
.drawer_rtl-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.drawer_rtl-enter-active,
.drawer_rtl-leave-active {
  transition: all 0.3s ease-in-out;
}
</style>
